<template>
    <view class="all">
        <!-- <view class="colseshow" @click="CloseWindow"></view> -->
        <view class="head">
            <text>编辑物品1</text>
            <image @click="CloseWindow" src="../../static/img/myhome/close@3x.png" mode=""></image>
        </view>
        <view class="backgroundcolor">
            <scroll-view scroll-y="true">
                <view class="box">
                    <view class="selecttype" @click="show = true">
                        <text>物品类型</text>
                        <view>
                            <text style="overflow: hidden;white-space: nowrap; text-overflow: ellipsis;">{{ selectText || '请选择' }}</text>
                            <u-icon name="arrow-down-fill" color="#999999" size="20"></u-icon>
                        </view>
                    </view>

                    <!-- 过磅 -->
                    <!--<view class="selectgb" v-if="jlList[wp.unit] == 'KG'">
                        <view class="type"><text>过磅</text></view>
                        <view class="kg">
                            <view><text>卸车前过磅</text></view>
                            <view><input type="digit" placeholder="卸车前过磅" v-model="wp.b_weigh" /></view>
                            <view>
                                <text>{{ jlList[wp.unit] }}</text>
                            </view>
                        </view>
                        <view class="kg">
                            <view><text>卸车后过磅</text></view>
                            <view><input type="digit" @change="aWeight" placeholder="卸车后过磅" v-model="wp.a_weigh" /></view>
                            <view>
                                <text>{{ jlList[wp.unit] }}</text>
                            </view>
                        </view>
                    </view>-->

                <!--     <view class="selectkg">
                        <view class="type">
                            <text>计量方式</text>
                            <view>
                                <picker @change="jlType" :range="jlList" disabled>
                                    <label class="select">{{ jlList[wp.unit] }}</label>
                                </picker>
                            </view>
                        </view>
                        <view class="kg">
                            <view><input type="digit" placeholder="请输入数量/重量1" v-model="wp.nums" /></view>
                            <view>
                                <text>{{ jlList[wp.unit] }}</text>
                            </view>
                        </view>
                    </view> -->

                    <view class="oneprice">
                        <text>单价</text>
                        <input type="digit" v-model="wp.unit_price" :disabled="priceDisabled" />
                        <view>
                            <text>元/{{ jlList[wp.unit] }}</text>
                        </view>
                    </view>
<!--                     <view class="img">
                        <view class="type"><text>上传图片</text></view>
                        <view class="kg">
                            <u-upload
                                ref="upload"
                                :action="baseUrl + '/api/images/upload'"
                                :file-list="imgurls"
                                :form-data="{ code: '999' }"
                                width="150rpx"
                                height="150rpx"
                                @on-success="uploadSu"
                                @on-remove="oploadRe"
                            ></u-upload>
                        </view>
                    </view> -->
                </view>
            </scroll-view>
        </view>
        <view class="button">
            <button @click="postedit"><span>确定</span></button>
        </view>

        <u-select
            mode="mutil-column-auto"
            v-model="show"
            :list="wptypelist"
            value-name="id"
            :default-value="defaultValue"
            label-name="wp_name"
            child-name="plist"
            @confirm="confirm"
        ></u-select>
    </view>
</template>

<script>
export default {
    data() {
        return {
            // 物品的类型
            wptypelist: [],
            // 计量的方式
            jlList: ['KG', '个/台'],
            selectText: '',
            show: false,
            baseUrl: '',
            wp: {},
            imgurls: [],
            index: 0,
            defaultValue: [],
            priceDisabled: true
        };
    },
    methods: {
        aWeight(v) {
            this.wp.nums = this.count(this.wp.b_weigh, this.wp.a_weigh);
        },
        count(a, b) {
            var multiple = 1000;
            return Math.round(parseFloat(a) * multiple - parseFloat(b) * multiple) / multiple;
        },
        handPriceDisabled() {
            this.priceDisabled = false;
        },
        cre(item, index) {
            this.wp = item;
            this.index = index;
            this.baseUrl = this.$store.state.baseUrl;
            this.wptypelist = this.$store.state.wptypelist;
            this.selectText = item.wp_name;
            this.wp.weight == '个' ? (this.wp.weight = '个') : (this.wp.weight = 'KG');
            let imgurls = [];
            this.wp.img.forEach((item, index) => {
                if (!this.$u.test.isEmpty(item)) {
                    imgurls.push({ url: item });
                }
            });
            this.imgurls = imgurls;
            this.defaultValue = [];
            this.wptypelist.forEach((item, index) => {
                if (item.plist.length > 0) {
                    item.plist.forEach((im, idex) => {
                        if (im.plist) {
                            im.plist.forEach((i, idx) => {
                                if (i.id == this.wp.wp_type[2]) {
                                    this.defaultValue.unshift(idx);
                                    return;
                                }
                            });
                        }
                        if (im.id == this.wp.wp_type[1]) {
                            this.defaultValue.unshift(idex);
                            return;
                        }
                    });
                }
                if (item.id == this.wp.wp_type[0]) {
                    this.defaultValue.unshift(index);
                    return;
                }
            });
        },
        oploadRe(index) {
            this.wp.img.splice(index, 1);
        },
        uploadSu(data) {
            this.wp.img.push(data.data.url);
        },
        // 关闭添加物品弹窗
        CloseWindow() {
            this.$emit('closewin');
        },
        // 选择计量方式
        jlType(e) {
            this.wp.unit = e.target.value;
            this.wp.weight = this.jlList[this.wp.unit];
        },
        // 确定编辑
        postedit() {
            this.wp.imgs = this.wp.img.join(',');
            this.wp.total_price = this.wp.nums * Number(this.wp.unit_price);
            this.wp.total_price = this.wp.total_price.toFixed(2);
            if (this.$u.test.isEmpty(this.wp.weight)) {
                this.wp.weight = 'KG';
            }
            if (this.$u.test.isEmpty(this.wp.wp_name)) {
                uni.showToast({
                    title: '请选择物品',
                    duration: 1000,
                    icon: 'none'
                });
                return;
            } else if (!this.$u.test.amount(this.wp.unit_price)) {
                uni.showToast({
                    title: '请输入正确金额',
                    duration: 1000,
                    icon: 'none'
                });
                return;
            }
            // else if (this.$u.test.isEmpty(this.wp.imgs)) {
            //     uni.showToast({
            //         title: '请上传图片',
            //         duration: 1000,
            //         icon: 'none'
            //     });
            //     return ;
            // }
            else {
                this.$emit('myEven', (this.wp, this.index));
            }
        },
        confirm(e) {
            this.selectText = e[1].label;
            this.wp.wp_name = e[1].label;
            // this.wp.wsize = e[2].label;
            this.wp.unit_price = e[1].extra.split(',')[0];
            this.wp.unit = Number(e[1].extra.split(',')[1]);
            this.wp.weight = this.wp.unit == 0 ? 'KG' : '个';
            this.wp.wp_type = [e[0].value, e[1].value];
        }
    }
};
</script>

<style lang="scss" scoped>
.all {
    position: relative;
    height: 100%;
}

.head {
    height: 88rpx;
    background-color: #ffffff;

    text {
        margin-left: 30rpx;
        line-height: 88rpx;
    }

    image {
        float: right;
        width: 85rpx;
        height: 85rpx;
    }
}

.box {
    padding: 30rpx;
    max-height: 800rpx;

    picker {
        width: 440rpx;
        height: 60rpx;
        background-color: #f7f7f7;
        border-radius: 10rpx;
        border: solid 2rpx #f2f2f2;
        padding: 0 28rpx;
        color: #999999;
        font-size: 28rpx;
        line-height: 60rpx;

        i {
            margin-top: 30rpx;
            float: right;
            width: 0;
            height: 0;
            border: 10rpx solid;
            border-color: #999999 transparent transparent;
        }
    }
}

.selecttype {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 98rpx;
    background-color: #ffffff;
    border-radius: 20rpx;

    view {
        width: 440rpx;
        height: 60rpx;
        background-color: #f7f7f7;
        border-radius: 10rpx;
        border: solid 2rpx #f2f2f2;
        padding: 0 28rpx;
        color: #999999;
        font-size: 28rpx;
        line-height: 60rpx;
        display: flex;
        justify-content: space-between;
    }
}
.selectgb {
    margin-top: 30rpx;
    // display: flex;
    // justify-content: space-around;
    // align-items: center;
    padding: 18rpx 0 25rpx 0;
    background-color: #ffffff;
    border-radius: 20rpx;

    view {
        display: flex;
        justify-content: space-around;
        align-items: center;
    }

    .type {
        border-bottom: 1px solid #eeeeee;
        padding-bottom: 15rpx;
        justify-content: flex-start;
        padding-left: 15rpx;
    }

    .kg {
        margin: 30rpx 30rpx 0;
        width: 630rpx;
        border-radius: 10rpx;
        border: solid 2rpx #e5e5e5;
        background-color: #ffffff;
        display: flex;
        justify-content: space-between;

        view:nth-child(1) {
            width: 165rpx;
            height: 70rpx;
            border-right: solid 2rpx #e8e9ed;
            background-color: #f7f7f7;
        }
        view:nth-child(2) {
            flex-grow: 1;
            background-color: #ffffff;

            text {
                font-size: 24rpx;
                color: #666666;
            }

            input {
                font-size: 24rpx;
                color: #666666;
            }
        }

        view:nth-child(3) {
            width: 125rpx;
            height: 70rpx;
            border-left: solid 2rpx #e8e9ed;
            background-color: #f7f7f7;

            text {
                font-size: 24rpx;
                color: #191919;
            }
        }
    }
}

.selectkg {
    margin-top: 30rpx;
    // display: flex;
    // justify-content: space-around;
    // align-items: center;
    padding: 18rpx 0 25rpx 0;
    background-color: #ffffff;
    border-radius: 20rpx;

    view {
        display: flex;
        justify-content: space-around;
        align-items: center;
    }

    .type {
        border-bottom: 1px solid #eeeeee;
        padding-bottom: 15rpx;
    }

    .kg {
        margin: 30rpx 30rpx 0;
        width: 630rpx;
        border-radius: 10rpx;
        border: solid 2rpx #e5e5e5;
        background-color: #ffffff;

        view:nth-child(1) {
            width: 630rpx;
            background-color: #ffffff;

            text {
                font-size: 24rpx;
                color: #666666;
            }
        }

        view:nth-child(2) {
            width: 125rpx;
            height: 70rpx;
            border-left: solid 2rpx #e8e9ed;
            background-color: #f7f7f7;

            text {
                font-size: 24rpx;
                color: #191919;
            }
        }
    }
}

.oneprice {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-top: 30rpx;
    height: 98rpx;
    // line-height: 98rpx;
    background-color: #ffffff;
    border-radius: 20rpx;
    padding: 0 30rpx;
}

.img {
    margin-top: 30rpx;
    // height: 273rpx;
    // display: flex;
    // justify-content: space-around;
    // align-items: center;
    padding: 18rpx 29rpx 25rpx 29rpx;
    background-color: #ffffff;
    border-radius: 20rpx;

    .type {
        height: 98rpx;
        line-height: 98rpx;
        border-bottom: 1px solid #eeeeee;
        padding-bottom: 15rpx;

        text {
            margin-right: 505rpx;
        }
    }

    .kg {
        margin-top: 30rpx;
        width: 630rpx;
        border-radius: 10rpx;
        background-color: #ffffff;
        // margin-bottom: 210rpx;

        image {
            width: 120rpx;
            height: 120rpx;
            margin-right: 20rpx;
            background-color: #f2f2f2;
            border-radius: 10rpx;
        }
    }
}

.button {
    position: flexd;
    left: 10rpx;
    padding: 20rpx 0;
    height: 140rpx;
    background-color: #eeeeee;

    button {
        width: 570rpx;
        height: 98rpx;
        background-color: #1bc078;
        border-radius: 49rpx;
    }

    span {
        font-size: 28rpx;
        color: #ffffff;
    }
}

.colseshow {
    width: 750rpx;
    height: calc(100% - 1028rpx);
    opacity: 0.1;
    background-color: #000000;
}

.backgroundcolor {
    background-color: #eeeeee;
}
</style>
